<template>
  <div class="HomeView">

    <!-- 轮播图 -->
    <van-swipe style="height: 12.5rem;background-color: #ccc;margin-top: 3.125rem;" vertical autoplay="3000">
      <van-swipe-item v-for="item in blogBanner" :key="item.id">
        <a :href="item.link_url" target="_blank">
          <img :src="item.image_url" alt="">
        </a>
      </van-swipe-item>
    </van-swipe>


    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" :text="mainmesage.inform_text" />

    <!-- 渲染单个的文章 -->
    <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="10">
      <div @click="GoblogContent(item.id)" class="blogItem_box" v-for="item in blogItemArr">
        <div class="blogItem-imgbox">
          <img :src="item.cove_image" alt="">
        </div>
        <div class="blogItem-textbox">
          <div class="article-title-class">
            <van-text-ellipsis rows=2 :content="item.title" />
          </div>
          <van-text-ellipsis class="blogItem-describe" rows=2 :content="item.title" />
          <div class="blogItem-botbox">
            <p>{{ item.create_timer }}</p>
            <span>{{ item.article_class }}</span>
          </div>
        </div>
      </div>
      <van-back-top />
    </van-list> -->
    <!-- 分页模式 -->
    <div @click="GoblogContent(item.content_id)" class="blogItem_box" v-for="item in blogItemArr">
      <img v-if="item.look_count >= 500" class="blogItem_box-hotimg" src="https://s1.ax1x.com/2023/04/03/ppfvzwR.png"
        alt="">

      <div class="blogItem-imgbox">
        <img v-lazy="item.cove_image ? item.cove_image : 'https://s1.ax1x.com/2023/04/03/ppfxklD.png'" alt="">
      </div>
      <div class="blogItem-textbox">
        <div class="article-title-class">
          <!-- <p>{{ item.article_class }}</p> -->
          <van-text-ellipsis rows=2 :content="item.title" />
        </div>
        <van-text-ellipsis class="blogItem-describe" rows=2 :content="item.article_describe" />
        <div class="blogItem-botbox">
          <p>{{ item.create_timer }}</p>
          <div><van-icon name="eye-o" />
            <p>{{ item.look_count }}</p>
          </div>
          <span>{{ item.article_class }}</span>
        </div>
      </div>
    </div>
    <!-- 数据空的时候显示没有啦 -->
    <div v-if="!blogItemArr.length">

    </div>
    <van-pagination v-model="currentPage" :total-items="125" :show-page-size="3" force-ellipses
      :page-count="Math.ceil(blogItemArrLength / 10)" @change="requireData(currentPage)" />

  </div>
</template>

<script setup>
import { blogItem, blogItemLength, getbanner } from "@/api/request";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";
// 路由跳转
import { useRouter } from "vue-router";
// 使用pinia
import { useStore } from "../store";
const store = useStore()
let { mainmesage } = storeToRefs(store);


const router = useRouter();
// 文章列表
let blogItemArr = ref([])

// 文章总数长度
let blogItemArrLength = ref(1)

// 轮播图
let blogBanner = ref([])

onMounted(() => {
  // 进入页面渲染第一页
  requireData(1);

  // 请求文章长度
  blogItemLength().then(({ data }) => {
    blogItemArrLength.value = data.data[0].blogitemlength
  })
  // 请求渲染轮播图
  getbanner().then(({ data }) => {
    // console.log(data.data);
    blogBanner.value = data.data
  })

});

// 逐渐加载模式
// 逐渐加载
// const list = ref([]);
// const loading = ref(false);
// const finished = ref(false);

// 请求页码
// let page = ref(1)

// const onLoad = async () => {
//   // 异步更新数据
//   await setTimeout(() => {
//     console.log(page.value);
// blogItem({
//   page: page.value
// }).then(({ data }) => {
//   data = data.data
//   // console.log(data);
//   data.map((item) => {
//     console.log(blogItemArr.value);
//     return blogItemArr.value.push(item)
//   })
//       page.value++
//     });
//     // 加载状态结束
//     loading.value = false;

//     // 数据全部加载完成
//     if (blogItemArr.value.length >= blogItemArrLength.value) {
//       finished.value = true;
//     }
//   }, 1000);
// };


// 分页加载模式
const currentPage = ref(1);
const requireData = (currentPage) => {
  // console.log(currentPage);
  blogItem({
    page: currentPage
  }).then(({ data }) => {
    data = data.data
    blogItemArr.value = data
    // console.log(data);
  })
}

// 跳转到内容
const GoblogContent = (contentId) => {
  console.log('内容contentIdid', contentId);
  router.push({
    path: "/blogContent",
    query: {
      blogItemID: contentId,
    }
  })
}


</script>
<style lang="scss">
.HomeView {
  height: 100%;
  padding: 1.25rem .875rem 0;

  .van-swipe {
    border-radius: .5rem;
    box-shadow: var(--boxshadow);

    .van-swipe-item {
      a {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 博客
  .blogItem_box {
    padding: .875rem .625rem;
    margin: .875rem 0;
    border-radius: .375rem;
    box-sizing: border-box;
    display: flex;
    // box-shadow: var(--boxshadow);
    background-color: white;

    .blogItem_box-hotimg {
      width: 1.25rem;
      height: 1.25rem;
      position: absolute;
      right: 1.25rem;
    }

    .blogItem-imgbox {
      img {
        width: 6.25rem;
        height: 6.25rem;
        border-radius: .75rem;
      }
    }


    .blogItem-textbox {
      width: 100%;
      margin-left: .625rem;
      position: relative;

      >.article-title-class {

        .van-text-ellipsis {
          font-size: .9375rem;
          font-weight: bold;
          line-height: 1.25rem;
        }

      }

      // 描述
      .blogItem-describe {
        // margin: 4px 0;
        font-size: .8125rem;
        color: #aaa;
        margin: 0px 0 1.25rem;
      }

      // 最底部
      .blogItem-botbox {
        width: 100%;
        position: absolute;
        bottom: 0;
        margin: 0;
        display: flex;
        align-items: center;

        >div {
          display: flex;
          align-items: center;
          margin-left: .625rem;

          p {
            margin-left: .125rem;
          }
        }

        p {
          font-size: .75rem;
          margin: 0;
        }

        span {
          font-size: .75rem;
          color: #fff;
          background-color: var(--motifColor);
          padding: .125rem .25rem;
          border-radius: .375rem;
          position: absolute;
          top: -0.125rem;
          right: 0;
        }
      }
    }

  }
}
</style>
